<template>
	<view class="singleMedia">
		<view :class="isImage ? 'single_image image_shadow' : 'single_image single_image_extend'">
			<image
				@click="perViewFile(0, file)"
				lazy-load
				:style="{ width: wideProcess(file) + 'rpx', height: highProcess(file) + 'rpx' }"
				:src="file.file_preview ? file.file_preview : file.file_path"
				:mode="imageModeProcess(file)"
			></image>
			<text @click="perViewFile(0, file)" class="iconfont icon-b-" v-if="!isImage"></text>
			<text class="long_figure_tips" v-else-if="iflong" :style="{ left: wideProcess(file) - 75 + 'rpx' }">长图</text>
		</view>
	</view>
</template>

<script>
import { throttle } from '../../utils/DebouchAndThrottl.js';
export default {
	name: 'singleMedia',
	props: ['file', 'isImage', 'maxWidth'],
	data() {
		return {
			iflong: false
		};
	},
	methods: {
		wideProcess(file) {
			let screenWidth = this.appInfo.screenWidth;
			let width = file.file_width >= screenWidth * (this.maxWidth / 750) ? this.maxWidth : file.file_width;
			return width;
		},
		highProcess(file) {
			let width = this.wideProcess(file);

			let ratio = file.file_ratio;
			if (ratio > 1.8) {
				return width / ratio;
			} else if (1.8 >= ratio && ratio >= 0.7) {
				return width / ratio;
			} else {
				this.iflong = true;
				return (this.maxWidth / 550) * 750;
			}
		},
		imageModeProcess(file) {
			let ratio = file.file_ratio;
			if (ratio > 1.8) {
				return 'aspectFill';
			} else if (1.8 >= ratio && ratio >= 0.7) {
				return 'widthFix';
			} else {
				return 'aspectFill';
			}
		},
		playVideo(vid) {
			let videoContext = uni.createVideoContext('v_' + vid, this);
			this.$emit('playVideo', videoContext);
		},
		perViewFile: throttle(function(index, files) {
			uni.navigateTo({
				url: '../utils/previewImageAndVideo?index=' + index,
				success: res => {
					uni.setStorageSync('previewFileArry', [files]);
					uni.setStorageSync('previewFileindex', index);
				}
			});
		}, 1000)
	}
};
</script>

<style lang="scss" scoped>
.singleMedia {
	width: 100%;

	.single_image_extend {
		justify-content: center;
		background-color: #000;
	}
	.single_image {
		width: 100%;
		position: relative;

		.long_figure_tips {
			position: absolute;
			bottom: 20rpx;
			font-size: 25rpx;
			padding: 5rpx 10rpx;
			color: white;
			border-radius: 30rpx;
			background: rgba(0, 0, 0, 0.6);
		}

		// #ifdef MP-QQ*/
		// .icon-b- {
		// 	position: absolute;
		// 	font-size: 75rpx;
		// 	padding: 5rpx 10rpx;
		// 	color: white;
		// 	top: calc(50% - 65rpx);
		// 	left: calc(50% - 45rpx);
		// }
		// /* #endif

		.icon-b- {
			position: absolute;
			font-size: 75rpx;
			padding: 5rpx 10rpx;
			color: white;
			top: calc(50% - 65rpx);
			left: calc(50% - 45rpx);
		}

		.image_shadow {
			box-shadow: 1rpx 1rpx 5rpx #d9d9d9;
		}
	}

	.single_video {
		width: 100%;
		justify-content: center;
		background-color: #000;
	}
}
</style>
